<template>
    <div class="course-list">
        <el-button class="course-new" type="primary" @click="newCourse" v-if="getUserIdentity === '老师'">+新建课程</el-button>
        <h1>我的课程</h1>
        <el-table
                :data="tableData"
                border>
            <el-table-column
                    prop="courseName"
                    label="课程名称"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="courseDescription"
                    label="课程简介">
                <template slot-scope="scope">
                    <div v-html="scope.row.courseDescription"></div>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="160">
                <template slot-scope="scope">
                    <el-button @click="handleEnter(scope.row)" type="text" size="large">进入</el-button>
                    <el-button
                            type="text"
                            size="large"
                            v-if="getUserIdentity === '老师'"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="新建课程"
                :visible.sync="dialogVisible"
                width="280"
                @closed="closeNewCourse">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="课程名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="课程简介">
                    <el-input type="textarea" v-model="form.desc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelNewCourse">取 消</el-button>
                <el-button type="primary" @click="confirmNewCourse">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="提示"
                :visible.sync="deleteDialogVisible"
                width="30%">
            <span v-if="currentData">确认删除课程{{currentData.courseName}}吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelDelete">取 消</el-button>
                <el-button type="primary" @click="confirmDelete">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import Api from '@utils/api';
    import { mapGetters, mapMutations } from 'vuex';

    export default {
        name: "selectCourse",
        data() {
            return {
                tableData: [],
                dialogVisible: false, // 新建课程弹窗可见性
                deleteDialogVisible: false, // 删除课程确认
                form: {
                    name: '',
                    desc: ''
                },
                currentData: null
            }
        },
        computed: {
            ...mapGetters([
                'getUserId',
                'getUserIdentity'
            ])
        },
        methods: {
            ...mapMutations([
                'setCurrentCourseId',
                'setCurrentCourseDetail'
            ]),
            handleEnter (row) {
                this.setCurrentCourseId(row.courseId);
                this.setCurrentCourseDetail(row);

                if (this.getUserIdentity === '老师') {
                    this.$router.push({
                        name: 'manageStudentOutline'
                    });
                }
                else if (this.getUserIdentity === '学生') {
                    this.$router.push({
                        name: 'courseInformationDescription'
                    });
                }
            },
            handleDelete (row) {
                this.currentData = row;
                this.deleteDialogVisible = true;

            },
            confirmDelete () {
                Api({
                    method: 'post',
                    url: '/deleteCourse',
                    data: {
                        course_id: this.currentData.courseId
                    }
                }).then(res => {
                    this.$notify({
                        type: 'success',
                        title: '课程删除成功！'
                    });

                    this.cancelDelete();
                    this.getTableData();
                });
            },
            cancelDelete () {
                this.deleteDialogVisible = false;
            },
            newCourse () {
                this.dialogVisible = true;
            },
            cancelNewCourse () {
                this.dialogVisible = false;
                this.clearData();
            },
            confirmNewCourse () {
                Api({
                    method: 'post',
                    url: '/newCourse',
                    data: {
                        course_name: this.form.name,
                        course_describ: this.form.desc,
                        course_teacher: this.getUserId,
                        course_notice: "",
                        course_plan: "",
                        course_kaohefangshi: "",
                        course_reference: ""
                    }
                }).then(res => {
                    this.$notify({
                        type: 'success',
                        title: '课程新建成功！'
                    });

                    this.cancelNewCourse();
                });
            },
            closeNewCourse () {
                this.clearData();
            },
            clearData () {
                this.form.name = '';
                this.form.desc = '';
            },
            getTableData () {
                Api({
                    method: 'post',
                    url: '/getAllCourse',
                    data: {
                        user_id: this.getUserId
                    }
                }).then(res => {
                    if (res.data && res.data.data && res.data.data.length) {
                        this.tableData = res.data.data.map(item => {
                            return {
                                courseId: item.course_id,
                                courseName: item.course_name,
                                courseDescription: item.course_describ,
                                notice: item.course_notice,
                                plan: item.course_plan,
                                reference: item.course_reference,
                                evaluation: item.course_kaohefangshi

                            }
                        });
                    }
                })
            }
        },
        mounted () {
            this.getTableData();
        }
    }
</script>

<style type="text/scss" lang="scss" scoped>
    .course-list {
        padding: 50px;
        position: relative;
        h1 {
            text-align: left;
            margin: 0;
            margin-bottom: 30px;
        }
        .course-new {
            position: absolute;
            right: 50px;
        }
    }
</style>